<template>
  <div class="index-container ec-container">
    <!-- 今日成交订单数 新增会员  当前访问人数 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="contract-container">
          <div class="contract-inner">
            <p class="contract-title">今日成交订单数</p>
            <p class="contract-number color-blue">594</p>
          </div>
          <div class="contract-inner">
            <p class="contract-title">今日新增会员数</p>
            <p class="contract-number color-blue">565</p>
          </div>
          <div class="contract-inner">
            <p class="contract-title">今日销售额</p>
            <p class="contract-number color-blue">85683.70</p>
          </div>
          <div class="contract-inner">
            <p class="contract-title">今日销售产品件数</p>
            <p class="contract-number color-blue">2569</p>
          </div>
          <div class="contract-inner">
            <p class="contract-title">今日客单价</p>
            <p class="contract-number color-blue">85.36</p>
          </div>
          <div class="special-inner">
            <div class="inner">
              <p class="contract-title">今天PV</p>
              <p class="contract-number color-blue">8495</p>
            </div>
              <div class="inner first">
              <p class="contract-title">今天UV</p>
              <p class="contract-number color-blue">2385</p>
            </div>
            
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 活跃时间间隔分布 累计购买金额分布 -->
    <el-row :gutter="20">
      <el-col :span="9">
        <div id="timeDistribution" class="common-container"></div>
      </el-col>
      <el-col :span="15">
        <div id="amounts" class="common-container"></div>
      </el-col>
    </el-row>

    <!-- 地图显示区域 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <div id="myChartChina" class="common-container"></div>
      </el-col>
      <el-col :span="12">
        <div id="topOrder"  class="common-container"></div>
      </el-col>
    </el-row>

    <!-- 会员销售趋势    会员购买KPI变化 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <div id="trend" class="common-container"></div>
      </el-col>
      <el-col :span="12">
        <div id="buyKpi" class="common-container"></div>
      </el-col>
    </el-row>

    <!-- 人均可用积分 当前可用积分-->
    <el-row :gutter="20">
      <el-col :span="10">
        <div id="points" class="common-container"></div>
      </el-col>
      <el-col :span="14">
        <div class="text">
          <el-row :gutter="10">
            <el-col :span="8" class="mr">
              <div class="grid-content">
                <span>会员等级：</span>
                <el-select class="w50" v-model="levelId" placeholder="请设置会员等级" @change="getAvailablePointByGroup">
                  <el-option
                    v-for="item in levelOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="16">
              <div class="grid-content">“会员等级”只对【当前可用积分_分组】报表受影响，其他数值和报表不受该条件影响；</div>
            </el-col>
          </el-row>
        </div>
        <div id="current" class="common-container current mt10"></div>
      </el-col>
    </el-row>


    
  </div>
</template>

<script>
  import china from '../../../static/json/china';
  import KtButton from "@/views/Core/KtButton";
  export default {
    components: {
      KtButton
    },
    data() {
      return {
        size: "small",
        value: "",
        stsDate: null,//统计日期
        storeName:null,
        //活跃时间分布
        less30:0,
        total30To60:0,
        total60To90:0,
        total90To120:0,
        total120To150:0,
        total150To180:0,
        total210To240:0,
        total240To270:0,
        total270To300:0,
        total300To330:0,
        total330To360:0,
        total360To365:0,
        more365:0,

        //购买金额分布
        less100:0,
        total100To600:0,
        total600To1100:0,
        total1100To1600:0,
        total1600To2100:0,
        total2100To2600:0,
        total2600To3100:0,
        total3100To3600:0,
        total3600To4100:0,
        total4100To4600:0,
        total4600To5000:0,
        more5000:0,

        storeId:null,

        //会员数
        memberNum:0,
        //笔件数
        amount:0,
        //销售趋势：
        consumeAmountList:[],//销售趋势时间列表；
        consumeDateList:[],//会员数列表；
        memberNumberList:[],//销售额列表；
        //等级下拉选项
        levelOptions: [
          {
            value:1,
            label:'粉丝会员',
          },
          {
            value:2,
            label:'普通会员',
          },
          {
            value:3,
            label:'钻石会员',
          },
          {
            value:4,
            label:'超级钻石会员',
          },
        ],
        value: "",
        stsDate: null,//统计日期
        levelId: null,
        tableData: [],
        storeId:null,//店铺ID
        storeName:null,//店铺ID
        channelId:null,//渠道ID
        platformId:null,//平台Id
        levelAvailablePoints:0,
        levelTotalPoints:0,//累计获取积分;
        levelUsedPoints:0,//累计使用积分;
        levelMemberAvgAvailablePoints:0,//人居可用积分;

        //会员数量统计:
        fansMemberNum:0,
        fansMemberPoint:0,
        normalMemberNum:0,
        normalMemberPoint:0,
        superDiamondMemberNum:0,
        superDiamondMemberPoint:0,
        diamondMemberNum:0,
        diamondMemberPoint:0,

        //各等级平均积分列表;
        avgLevelPointList:[],
        //注册时间查询
        less1000  :0,
        total1000To2000 :0,
        total2000To3000 :0,
        total3000To4000 :0,
        total4000To5000:0,
        total5000To6000:0,
        total6000To7000:0,
        total7000To8000:0,
        total8000To9000:0,
        total9000To10000:0,
        more10000:0,
      }
    },

    mounted() {
      this.getDistributeOfActiveTime();    
      this.getDistributeOfConsumeAmount();
      this.drawMap();
      this.$echarts.registerMap('china', china);
      this.drawLine();
      this.getTrendOfMemberSell();//会员销售趋势；
      this.getTrendOfMemberSellKPI();//会员销售KPI趋势
      this.getDistributionOfMemberNumOfAllLevel();
      this.getAvailablePointByGroup();
    },

    methods: {

      // 中国地图
      drawMap(){
        // 基于准备好的dom，初始化echarts实例
        let myChartContainer = document.getElementById('myChartChina');
        let myChartChina = this.$echarts.init(myChartContainer);
        // 绘制图表
        let optionMap = {
          tooltip: {},
          legend: {
            orient: 'vertical',
            left: 'left',
          },
          visualMap: {
            min: 0,
            max: 1000000,
            left: '0%',
            top: 'bottom',
            text: ['高','低'],
            calculable : true,
            color:['#0b50b9','#c3e2f4']
          },
          selectedMode: 'single',
          series : [
            {
              name: '',
              type: 'map',
              mapType: 'china',
              itemStyle: {
                normal:{
                  borderColor: 'rgba(0, 0, 0, 0.2)'
                },
                emphasis:{
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                  shadowBlur: 20,
                  borderWidth: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              showLegendSymbol: true,
              label: {
                normal: {
                  show: true
                },
                emphasis: {
                  show: true
                }
              },
              data:[
                {name: '上海',value: 1580107 },
                {name: '北京',value: 1534873 },
                {name: '天津',value: 12345 },
                {name: '重庆',value: 2456 },
                {name: '河北',value: 35364 },
                {name: '河南',value: 36656 },
                {name: '云南',value: 2566 },
                {name: '辽宁',value: 2546 },
                {name: '黑龙江',value: 265546 },
                {name: '湖南',value: 2646 },
                {name: '安徽',value: 2366 },
                {name: '山东',value: 236564 },
                {name: '新疆',value: 2356546 },
                {name: '江苏',value: 236 },
                {name: '浙江',value: 2 },
                {name: '江西',value: 2 },
                {name: '湖北',value: 2 },
                {name: '广西',value: 2 },
                {name: '甘肃',value: 2 },
                {name: '山西',value: 2 },
                {name: '内蒙古',value: 2 },
                {name: '陕西',value: 2 },
                {name: '吉林',value: 2 },
                {name: '福建',value: 2 },
                {name: '贵州',value: 2 },
                {name: '广东',value: 2 },
                {name: '青海',value: 2 },
                {name: '西藏',value: 2 },
                {name: '四川',value: 2 },
                {name: '宁夏',value: 2 },
                {name: '海南',value: 2 },
                {name: '台湾',value: 2 },
                {name: '香港',value: 2 },
                {name: '澳门',value: 2 }
              ]
            }
          ]
        }
        let timesRun = 0;
        let interval = setInterval(function () {
          timesRun += 1;
          if (timesRun === 10) {
            clearInterval(interval);
          }
          myChartChina.setOption(optionMap);
        }, 100);

        window.onresize=function(){
          myChartChina.resize();
        }
      },

      // 成交订单金额
      drawLine() {
        let topOrder = document.getElementById('topOrder');
        let myChartChina = this.$echarts.init(topOrder);
        let option = {
          title: {
            text: '成交订单金额TOP5',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            name: "单位: 元",
            type: 'category',
            data: ['北京', '上海','深圳','广东','浙江']
          },
          series: [
            {
              name: '',
              type: 'bar',
              data: [1268070, 1280107,1241567,1324253,2452453]
            },
          ]
        };
        myChartChina.setOption(option);
      },

      /**
       * 活跃时间段 - 饼状图
       */
      getDistributeOfActiveTime(){
        let this_ = this;
        let param = {
          channelId:this_.channelId,
          storeId:this_.storeId,
          storeName:this_.storeName,
          platformId:this_.platformId,
          status:1,
          deleteFlag:0,
          deptId:null,
          merchantId:null,
          id:null,
          stsDate: this_.stsDate,
        };
        this_.utils.request.getDistributeOfActiveTime(param,res => {
          if (res !==null && res.code === '0000' && res.data !== null){
            this_.less30 = res.data.less30;
            this_.total30To60 = res.data.total30To60;
            this_.total90To120 = res.data.total90To120;
            this_.total120To150 = res.data.total120To150;
            this_.total150To180 = res.data.total150To180;
            this_.total180To210 = res.data.total180To210;
            this_.total210To240 = res.data.total210To240;
            this_.total240To270 = res.data.total240To270;
            this_.total270To300 = res.data.total270To300;
            this_.total300To330 = res.data.total300To330;
            this_.total330To360 = res.data.total330To360;
            this_.total360To365 = res.data.total360To365;
            this_.more365 = res.data.more365;
            this_.timeDistribution();
          }else{
            this_.$message({message:'无法获取会员【活跃时间段】总记录数' , type: 'error'})
          }
        });
      },

      //  活跃时间段画图部分
      timeDistribution(){
        let timeDistribution = document.getElementById("timeDistribution");
        let timeDistributionWrap = this.$echarts.init(timeDistribution);
        let option = {
          title: {
            text: "活跃时间间隔分布"
          },
          color: [
            "#1ea084",
            "#b0d1b5",
            "#29474d",
            "#f97e2c",
            "#a7cd67",
            "#ffc53d",
            "#ff6b6d",
            "#f785c0",
            "#51cfca",
            "#52b1ff",
            "#1ea084",
            "#b0d1b5",
            "#29474d",
            "#f97e2c"
          ],
          tooltip: {
            show: true,
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          legend: {
            orient: "horizontal",
            left: "center",
            top: "5%",
            data: [
              "0-30",
              "30-60",
              "60-90",
              "90-120",
              "120-150",
              "150-180",
              "180-210",
              "210-240",
              "240-270",
              "270-300",
              "300-330",
              "330-360",
              "360-365",
              ">=365"
            ]
          },
          series: [
            {
              top: "5%",
              name: "",
              type: "pie",
              radius: ["50%", "65%"],
              label: {
                normal: {
                  show: false,
                  position: "center"
                }
              },
              data: [
                { value: this.less30, name: "0-30" },
                { value: this.total30To60, name: "30-60" },
                { value: this.total60To90, name: "60-90" },
                { value: this.total90To120, name: "90-120" },
                { value: this.total120To150, name: "120-150" },
                { value: this.total150To180, name: "150-180" },
                { value: this.total210To240, name: "210-240" },
                { value: this.total240To270, name: "240-270" },
                { value: this.total270To300, name: "270-300" },
                { value: this.total300To330, name: "300-330" },
                { value: this.total330To360, name: "330-360" },
                { value: this.total360To365, name: "360-365" },
                { value: this.more365, name: ">=365" }
              ]
            }
          ]
        };
        timeDistributionWrap.setOption(option);
      },

      //  获取累计购买金额分布数据
      getDistributeOfConsumeAmount(){
        let this_ = this;
        let param = {
          channelId:this_.channelId,
          storeId:this_.storeId,
          storeName:this_.storeName,
          platformId:this_.platformId,
          status:1,
          deleteFlag:0,
          deptId:null,
          merchantId:null,
          id:null,
          stsDate: this_.stsDate,
        };
        this_.utils.request.getDistributeOfConsumeAmount(param,res => {
          if (res !==null && res.code === '0000' && res.data !== null){
            this_.less100 = res.data.less100/10000;
            this_.total100To600 = res.data.total100To600/10000;
            this_.total600To1100 = res.data.total600To1100/10000;
            this_.total1100To1600 = res.data.total1100To1600/10000;
            this_.total1600To2100 = res.data.total1600To2100/10000;
            this_.total2100To2600 = res.data.total2100To2600/10000;
            this_.total2600To3100 = res.data.total2600To3100/10000;
            this_.total3100To3600 = res.data.total3100To3600/10000;
            this_.total3600To4100 = res.data.total3600To4100/10000;
            this_.total4100To4600 = res.data.total4100To4600/10000;
            this_.total4600To5000 = res.data.total4600To5000/10000;
            this_.more5000 = res.data.more5000/10000;
            this_.amounts();
          }else{
            this_.$message({message:'无法获取会员【购买价格】总记录数' , type: 'error'})
          }
        });
      },

      // 累计购买金额分布画图
      amounts() {
        let amount = document.getElementById("amounts");
        let amountWrap = this.$echarts.init(amount);
        let option = {
          title: {
            text: "累计购买金额分布"
          },
          legend: {
            data: ["会员数"],
            left: "center"
          },
          xAxis: {
            type: "category",
            data: [
              "小于100",
              "100-600",
              "600-1100",
              "1100-1160",
              "1160-2100",
              "2100-2600",
              "2600-3100",
              "3100-3600",
              "3600-4100",
              "4100-4600",
              "4600-5000",
              ">=5000"
            ],
            axisLabel: {
              interval: 0,
              rotate: 60 //代表逆时针旋转45度
            }
          },
          yAxis: [
            {
              type: "value",
              name: " ",
              min: 0,
              max: 50,
              position: "left",
              axisLabel: {
                formatter: "{value} 万"
              }
            }
          ],
          series: [
            {
              name: "会员数",
              type: "bar",
              data: [
              this.less100,
              this.total100To600,
              this.total600To1100,
              this.total1100To1600,
              this.total1600To2100,
              this.total2100To2600,
              this.total2600To3100,
              this.total3100To3600,
              this.total3600To4100,
              this.total4100To4600,
              this.total4600To5000,
              this.more5000,
              ],
              barWidth: 30,
              color: "#1ea084"
            }
          ]
        };
        amountWrap.setOption(option);
      },

      // 销售趋势统计 - 柱状图
      getTrendOfMemberSell(){
        let this_ = this;
        let param = {
          channelId:this_.channelId,
          storeId:this_.storeId,
          storeName:this_.storeName,
          platformId:this_.platformId,
          status:1,
          deleteFlag:0,
          deptId:null,
          merchantId:null,
          id:null,
          stsDate: this_.stsDate,
        };
        this_.utils.request.getTrendOfMemberSell(param,res => {
          if (res !==null && res.code === '0000' && res.data !== null){
            this_.consumeAmountList = res.data.consumeAmountList;//销售数列表
            this_.consumeDateList = res.data.consumeDateList;//销售日期列表
            this_.memberNumberList = res.data.memberNumberList;//会员数量列表
            this_.trend();
          }else{
            this_.$message({message:'无法获取会员销售趋势柱状图数据记录数' , type: 'error'})
          }
        });
      },
      // 销售趋势
      trend() {
        let trend = document.getElementById("trend");
        let myTrend = this.$echarts.init(trend);
        let option = {
          title: {
            text: "会员销售趋势"
          },
          xAxis: {
            type: "category",
            data: this.consumeDateList,
          },
          yAxis: [
            {
              type: "value",
              name: "销售额（线）",
              min: 0,
              max: 10,
              position: "right",
              axisLabel: {
                formatter: "{value} 百万"
              }
            },
            {
              type: "value",
              name: "会员数（柱）",
              min: 0,
              max: 5,
              position: "left",
              axisLabel: {
                formatter: "{value} 万"
              }
            }
          ],
          legend: {
            data: ["会员数", "销售额"]
          },
          series: [
            {
              barWidth: 15,
              name: "会员数",
              data: this.memberNumberList,
              type: "bar",
              smooth: true,
              color: "#1ea084"
            },
            {
              barWidth: 15,
              name: "销售额",
              data: this.consumeAmountList,
              type: "line",
              smooth: true,
              color: "#b0d1b5"
            }
          ]
        };
        myTrend.setOption(option);
      },

      // 销售趋势KPI统计 - 柱状图
      getTrendOfMemberSellKPI(){
        let this_ = this;
        let param = {
          channelId:this_.channelId,
          storeId:this_.storeId,
          storeName:this_.storeName,
          platformId:this_.platformId,
          status:1,
          deleteFlag:0,
          deptId:null,
          merchantId:null,
          id:null,
          stsDate: this_.stsDate,
        };
        this_.utils.request.getTrendOfMemberSellKPI(param,res => {
          if (res !==null && res.code === '0000' && res.data !== null){
            this_.consumeAmountList = res.data.consumeAmountList;//销售数列表
            this_.consumeDateList2 = res.data.consumeDateList;//销售日期列表
            this_.orderAvgGoodsQuantityList = res.data.orderAvgGoodsQuantityList;//会员数量列表
            this_.buyKpi();
          }else{
            this_.$message({message:'无法获取会员销售趋势柱状图数据记录数' , type: 'error'})
          }
        });
      },

      // 销售趋势KPI统计
      buyKpi() {
        let buyKpi = document.getElementById("buyKpi");
        let mybuyKpi = this.$echarts.init(buyKpi);
        let option = {
          title: {
            text: "会员购买KPI变化"
          },
          xAxis: {
            type: "category",
            data: this.consumeDateList2,
            axisLabel: {
              interval: 0,
              rotate: 45 //代表逆时针旋转45度
            }
          },
          yAxis: [
            {
              type: "value",
              name: "",
              min: 0,
              max: 300,
              position: "left"
            }
          ],
          legend: {
            data: ["客单价", "笔件数"]
          },
          series: [
            {
              name: "客单价",
              data: this.memberAvgAmountList,
              type: "line",
              smooth: true,
              color: "#1ea084"
            },
            {
              name: "笔件数",
              data: this.orderAvgGoodsQuantityList,
              type: "line",
              smooth: true,
              color: "#b0d1b5"
            }
          ]
        };
        mybuyKpi.setOption(option);
      },


      // 各等级会员人均可使用积分
      getDistributionOfMemberNumOfAllLevel(){
        let this_ = this;
        let param = {
          channelId: this_.channelId,
          storeId: this_.storeId,
          storeName: this_.storeName,
          platformId: this_.platformId,
          status: 1,
          deleteFlag: 0,
          deptId: null,
          merchantId: null,
          id: null,
          stsDate: this_.stsDate,
          createTimeStart: null,
        };
        this_.utils.request.getDistributionOfMemberNumOfAllLevel(param, res => {
          if (res !== null && res.code === '0000' && res.data !== null && res.data.length > 0) {
              this_.tableData = res.data;
              let list = res.data;
              list.forEach(item => {
                if (item.levelId === 1) {
                  this_.fansMemberNum = item.levelMemberNumber;
                  this_.fansMemberPoint = item.levelAvailablePoints;
                  this_.avgLevelPointList.push(item.levelMemberAvgAvailablePoints)
                }
                else if (item.levelId === 2) {
                  this_.normalMemberNum = item.levelMemberNumber;
                  this_.normalMemberPoint = item.levelAvailablePoints;
                  this_.avgLevelPointList.push(item.levelMemberAvgAvailablePoints)
                }
                else if (item.levelId === 3) {
                  this_.diamondMemberNum = item.levelMemberNumber;
                  this_.diamondMemberPoint = item.levelAvailablePoints;
                  this_.avgLevelPointList.push(item.levelMemberAvgAvailablePoints)
                }
                else if (item.levelId === 4) {
                  this_.superDiamondMemberNum = item.levelMemberNumber;
                  this_.superDiamondMemberPoint = item.levelAvailablePoints;
                  this_.avgLevelPointList.push(item.levelMemberAvgAvailablePoints)
                }
              });
            this_.points();
          } else {
            this_.$message({message: '没有获取到[会员积分详情]信息', type: 'error'})
          }
        });
      },

      // 人均可使用积分
      points() {
        let points = document.getElementById("points");
        let pointsWrap = this.$echarts.init(points);
        let option = {
          title: {
            text: "各等级会员_人均可用积分"
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            }
          },
          legend: {
            data: ["人均可用积分"],
            left: "center"
          },
          xAxis: { type: "value" },
          yAxis: {
            name: "",
            type: "category",
            data: ["粉丝会员", "普通会员", "demo钻石会员", "demo钻石II会员"],
            axisLabel: {
              interval: 0,
              rotate: 45 //代表逆时针旋转45度
            }
          },
          series: [
            {
              name: "人均可用积分",
              type: "bar",
              barHeight: 150,
              barWidth: 30,
              data: this.avgLevelPointList,
              color: "#1ea084"
            }
          ]
        };
        pointsWrap.setOption(option);
      },

      // 当前可用积分/分组 - 柱状图
      getAvailablePointByGroup(){
        let this_ = this;
        let param = {
          channelId:this_.channelId,
          storeId:this_.storeId,
          storeName:this_.storeName,
          platformId:this_.platformId,
          levelId:this_.levelId,
          status:1,
          deleteFlag:0,
          deptId:null,
          merchantId:null,
          id:null,
          stsDate: this_.stsDate,

        };
        this_.utils.request.getAvailablePointByGroup(param,res => {
          if (res !==null && res.code === '0000' && res.data !== null){
            this_.less1000 = (res.data.less1000);
            this_.total1000To1500 = (res.data.total1000To1500/10000);
            this_.total2000To3000 = (res.data.total2000To3000/10000);
            this_.total3000To4000 = (res.data.total3000To4000/10000);
            this_.total4000To5000 = (res.data.total4000To5000/10000);
            this_.total5000To6000 = (res.data.total5000To6000/10000);
            this_.total6000To7000 = (res.data.total6000To7000/10000);
            this_.total7000To8000 = (res.data.total7000To8000/10000);
            this_.total8000To9000 = (res.data.total8000To9000/10000);
            this_.total9000To10000 = (res.data.total9000To10000/10000);
            this_.more10000 = res.data.more10000/10000;
            this_.current();
          }else{
            this_.$message({message:'无法获取当前可用积分(分组)记录数' , type: 'error'})
          }
        });
      },

      // 当前可用分组
      current() {
        let current = document.getElementById("current");
        let currentWrap = this.$echarts.init(current);
        let option = {
          title: {
            text: "当前可用积分_分组"
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            }
          },
          legend: {
            data: ["会员数"],
            left: "center"
          },
          xAxis: {
            name: "",
            type: "category",
            data: [
              "0-1000",
              "1000-1500",
              "2000-2500",
              "3000-3500",
              "4000-4500",
              "5000-5500",
              "6000-6500",
              "7000-7500",
              "8000-8500",
              "9000-9500",
              ">=10000"
            ],
            axisLabel: {
              interval: 0,
              rotate: 45 //代表逆时针旋转45度
            }
          },
          yAxis: [
            {
              type: "value",
              name: " ",
              min: 0,
              max: 150,
              position: "left",
              axisLabel: {
                formatter: "{value} 万"
              }
            }
          ],
          series: [
            {
              name: "会员数",
              type: "bar",
              barHeight: 150,
              barWidth: 30,
              data: [
                this.less1000,
                this.total1000To2000,
                this.total2000To3000,
                this.total3000To4000,
                this.total4000To5000,
                this.total5000To6000,
                this.total6000To7000,
                this.total7000To8000,
                this.total8000To9000,
                this.total9000To10000,
                this.more10000,
              ],
              color: "#1ea084"
            }
          ]
        };
        currentWrap.setOption(option);
      },




    }
  }
</script>

<style scoped lang="scss">
  .index-container {
    background-color: #EEF5F9;
    padding: 0 10px 50px;
    box-sizing: border-box;
  }
  .contract-container {
    background-color: #fff;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 10px;
  }
  .contract-inner {
    flex: 1;
    text-align: center;
  }
  .contract-title {
    color: #888;
    font-size: 18px;
  }
  .contract-number {
    color: #333;
    font-size: 18px;
    font-weight: 700;
  }
  .special-inner {
    width: 200px;
    padding-right: 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  .inner {
    flex: 1;
    text-align: center;
    position: relative;
  }
  .first::after {
    content: '';
    width: 1px;
    height: 80px;
    position: absolute;
    top: 10px;
    left: 0;
    border-left: 1px solid #ccc;
  }
  .color-blue {
    color: #2F4554;
  }
  .common-container {
    padding: 20px;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #dee5e7;
    width: 100%;
    height: 500px;
    margin-top: 10px;
  }
  .warn-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }

  .warn {
    box-sizing: border-box;
    background-color: #fff;
    width: 50%;
    height: 230px;
  }
  


.ec-container {
  .mr10 {
    margin: 0 10px 10px 0;
  }
  .text {
    margin-bottom: 10px;
    background-color: #fff;
    padding: 10px;
    margin-top: 10px;
    .grid-content {
      height: 40px;
    }
  }
  .current {
    height: 430px;
  }
}
</style>
